<template>
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="订单详情" fixed :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
      background-color="#ffffff"></uni-nav-bar>
    <view class="main">
      <view class="detail detailHeight2">
        <!-- <view class="title">订单明细</view> -->
        <view class="info">
          <view class="count" style="width: 50% !important;" v-if="obj.returnsMode == '0'">退款方式：现金退款</view>
          <view class="count" style="width: 50% !important;" v-if="obj.returnsMode == '1'">退款方式：微信转账</view>
          <view class="count" style="width: 50% !important;" v-if="obj.returnsMode == '2'">退款方式：支付宝转账</view>
        </view>
        <view class="info">
          <view class="two">退款原因：{{ obj.returnsReason | returnsReasonFilter(returnsReasonList) }}
          </view>
        </view>
      </view>
      <view class="detail detailHeight1" v-if="obj.memberPhone">
        <view class="title">会员信息</view>
        <view class="one u-ellipsis" style="margin-bottom: 10rpx;  font-size: 28rpx;">会员名称：{{ obj.memberName ?
          obj.memberName : obj.memberPhone }}</view>
        <view class="two" style="font-size: 28rpx;">手机号：{{ obj.memberPhone }}</view>
      </view>
      <view class="goodsList">
        <view class="title">商品明细</view>
        <view class="goods" v-for="(item, index) in  goodsList " :key="item.id + index">
          <image :src="item.imageUrl ? item.imageUrl : '/static/index/noneImg.png'" mode="aspectFill"></image>
          <view class="goodInfo">
            <view class="name u-ellipsis" style="font-weight: 600;">{{ item.commodityName }}</view>

            <view class="price">
              <text class="num">￥{{ item.storePrice }} * {{ item.type == '1' ? item.weight + 'KG' : item.commodityNum
              }}</text>
              <text class="money">小计：￥{{ item.receivableAmount }}</text>
            </view>
            <view class="price">
              <text class="num">已退：{{ item.returnedCount }}</text>
              <text class="money">可退：{{ item.refundableCount }}</text>
            </view>
            <view class="price">
              <text class="num">单次退货数量：{{ item.returnsCount }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqReturnOrderDetail, getDictValueAndNameSource } from '@/apis/member'
export default {
  name: "InventoryInfo",
  data() {
    return {
      goodsList: [],
      id: '',
      obj: {},
      returnsReasonList: {}
    }
  },
  filters: {
    returnsReasonFilter(val, list) {
      for (let key in list) {
        if (key == val) return list[key]
      }
    }
  },
  onLoad(params) {
    console.log('params', params);
    this.id = params?.id
    this.reqReturnOrderDetail()
    this.getDictValueAndNameSource()
  },
  onShow() {
  },
  methods: {
    async getDictValueAndNameSource() {
      const res = await getDictValueAndNameSource('RETURNS_REASON')
      if (res.code == 200) {
        this.returnsReasonList = res.data
        console.log('returnsReasonList', res.data);
      }
    },
    async reqReturnOrderDetail() {
      const res = await reqReturnOrderDetail({ id: this.id })
      if (res.code == 200) {
        console.log('res', res.data);
        this.obj = res.data
        this.goodsList = res.data.commodityList
      }
    }
  }
}
</script>
<style>
page {
  background: #fff;

}
</style>
<style lang="scss" scoped >
.content {
  height: 100vh;
  background-color: #fff;
}

view {
  box-sizing: border-box;
}

.main {

  display: flex;
  flex-direction: column;
  height: calc(100% - 88rpx);

  .detailHeight1 {

    height: 180rpx;
  }

  .detailHeight2 {

    height: 150rpx;
  }

  .detail {
    padding: 10rpx;
    width: 100%;
    border-bottom: 1px solid #eee;

    .title {
      height: 50rpx;
      line-height: 50rpx;
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 10rpx;
    }

    .info {
      font-size: 28rpx;
      height: 50rpx;
      line-height: 50rpx;
      display: flex;
      justify-content: space-between;
      // margin-bottom: 10rpx;

      .one {
        width: 40%;
      }

      .two {
        width: 60%;
      }
    }
  }

  .goodsList {
    flex: 1;
    padding: 10rpx;
    overflow: scroll;

    .title {
      height: 50rpx;
      line-height: 50rpx;
      font-size: 36rpx;
      font-weight: 600;
      margin-bottom: 10rpx;
    }

    .goods {
      display: flex;

      justify-content: space-between;
      padding: 20rpx 10rpx;
      // height: 200rpx;
      font-size: 28rpx;
      border-bottom: 1px solid #eee;

      image {
        margin-right: 20rpx;
        height: 170rpx;
        width: 170rpx;
        box-sizing: border-box;
        border: 1px solid #eee;
      }

      .goodInfo {
        flex: 1;
        // line-height: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-right: 30rpx;
				.name {
					width: 500rpx;
				}
      }

      .price {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .btn {
    height: 80rpx;
    text-align: center;
    background-color: $uni-main-bgColor;
    line-height: 80rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 600
  }
}
</style>
